<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchFollowUpRecordListAPI } from '@/apis/fetchFollowUpRecordList'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const id = ref('')

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore, refresh } = useLoadMore<LoadMoreData<FollowUp>>(
  fetchData,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onLoad((options) => {
  if (options && options.id) {
    id.value = options.id
    refresh()
  }
  else { uni.showToast({ title: '数据获取失败', icon: 'none' }) }
})

onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchData(d?: LoadMoreData<FollowUp>): Promise<LoadMoreData<FollowUp>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchFollowUpRecordListAPI(
    {
      id: id.value,
      page: _page.toString(),
      limit: '10',
    },
    userInfoStore.userInfo!.token!,
  )

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

function handleTapRecord(id: string) {
  router.push({
    name: 'followUpRecordDetail',
    params: { id },
  })
}
</script>

<template>
  <view v-if="dataList.length > 0" class="min-h-screen bg-#F8F8F8">
    <Spacer height="44" />
    <view v-for="item in dataList" :key="item.id" class="rounded-20rpx bg-white p-24rpx" @tap="handleTapRecord(item.id.toString())">
      <view class="flex items-center justify-between">
        <view class="text-32rpx text-#333333 font-semibold leading-45rpx">
          {{ item.title }}
        </view>
        <image class="h-25rpx w-14rpx" src="@/static/images/cheveron_right.png" />
      </view>
      <Spacer height="24" />
      <Divider width="654" color="#E6E6E6" />
      <Spacer height="24" />
      <view class="flex items-center">
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          复诊时间：
        </view>
        <view class="text-28rpx text-#848484 leading-40rpx">
          {{ item.again_visit_time }}
        </view>
      </view>
    </view>
    <!-- 加载更多 -->
    <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  </view>
  <PageDefault v-else>
    暂无复诊记录
  </PageDefault>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'followUpRecord'
style:
  navigationBarTitleText: '复诊记录'
</route>
